<template>
    <el-sub-menu :index="item.path" v-if="item.children && item.children.length">
      <template #title>
        <el-icon><Histogram /></el-icon>
        <span>{{item.name}}</span>
      </template>
      <menu-item 
        v-for="childItem in item.children" 
        :key="childItem.path" 
        :item="childItem"></menu-item>
    </el-sub-menu>
    <el-menu-item :index="item.path" v-else>
      <el-icon><Histogram /></el-icon>
      <template #title>{{item.name}}</template>
    </el-menu-item>
</template>
<script>
  import {Histogram} from '@element-plus/icons-vue'
    export default {
        name: 'MenuItem',
        props: ['item'],
        components: {Histogram},
    }
</script>
<style lang="less" scoped>

</style>